<template>
  <view class="login-container">
    <!-- 商户管理平台登录 -->
    <view class="login-wrapper" v-if="login_type === 'system'">
      <view class="gradient-bg"></view>
      <view class="login-header">
        <view class="app-logo">
          <text class="logo-text">{{ miniProgramName }}</text>
        </view>
        <view class="platform-name">企业管理平台</view>
      </view>

      <view class="glass-card">
        <view class="card-header">
          <text class="card-title" v-if="!forgetPwd_istrue">欢迎登录</text>
          <text class="card-title" v-else>找回密码</text>
        </view>

        <view class="form-content" v-if="!forgetPwd_istrue">
          <view class="input-group">
            <u-icon name="account" color="#FB5904" size="38"></u-icon>
            <input
              v-model="mobile"
              type="number"
              placeholder="请输入账号/手机号"
              placeholder-class="input-placeholder"
              class="form-input"
            />
          </view>
          <view class="input-group">
            <u-icon name="lock" color="#FB5904" size="38"></u-icon>
            <input
              v-model="password"
              type="password"
              placeholder="请输入密码"
              placeholder-class="input-placeholder"
              class="form-input"
            />
          </view>
        </view>

        <view class="form-content" v-else>
          <view class="input-group">
            <u-icon name="phone" color="#FB5904" size="38"></u-icon>
            <input
              v-model="forget_pwd.mobile"
              type="number"
              placeholder="请输入手机号码"
              placeholder-class="input-placeholder"
              class="form-input"
            />
          </view>
          <view class="input-group">
            <u-icon name="chat" color="#FB5904" size="38"></u-icon>
            <input
              v-model="forget_pwd.yzm"
              type="number"
              placeholder="输入验证码"
              placeholder-class="input-placeholder"
              class="form-input code-input"
            />
            <view class="code-btn">获取验证码</view>
          </view>
          <view class="input-group">
            <u-icon name="lock" color="#FB5904" size="38"></u-icon>
            <input
              v-model="forget_pwd.password"
              type="password"
              placeholder="设置新密码"
              placeholder-class="input-placeholder"
              class="form-input"
            />
          </view>
        </view>

        <view class="action-area" v-if="!forgetPwd_istrue">
			<!--
          <text class="action-link" @click="login('test')">体验账号</text>-->
          <!-- <text class="action-link" @click="forgetPwd_istrue=true">忘记密码</text> -->
          <view class="login-btn" @click="login()">
            <u-loading
              :show="is_loading"
              color="#ffffff"
              mode="circle"
            ></u-loading>
            <text v-if="!is_loading">立即登录</text>
          </view>
        </view>

        <view class="action-area" v-else>
          <text class="action-link" @click="forgetPwd_istrue = false"
            >返回登录</text
          >
          <view class="login-btn" @click="forgetPwd_istrue = false">
            <text>确认重置</text>
          </view>
        </view>
      </view>

      <view class="footer-text">
        <text>{{ miniProgramName }} - 让企业采购更简单</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      login_type: "system",
      login_istrue: true,
      is_loading: false,
      mobile: "",
      password: "",
      yzm: "",
      forgetPwd_istrue: false,
      forget_pwd: {
        mobile: "",
        password: "",
        yzm: "",
      },
      miniProgramName: "订货虎", // 默认名称，将通过接口动态更新
    };
  },
  onLoad() {
    // 页面加载时调用获取小程序配置信息接口
    this.getMiniProgramInfo();
  },
  onShareAppMessage(res) {},
  methods: {
    changeLogin() {
      this.login_type = this.login_type === "supplier" ? "system" : "supplier";
    },
    login(test) {
      // 体验一下
      let mobile = "";
      let password = "";
      if (test) {
        mobile = "18888888888";
        password = "123456";
      } else {
        if (!this.mobile) {
          this.$u.toast("请输入登录账号");
          return;
        }
        if (!this.password) {
          this.$u.toast("请输入密码");
          return;
        }
        mobile = this.mobile;
        password = this.password;
      }

      this.is_loading = true;
      let params = {
        mobile: mobile,
        password: password,
      };
      if (this.login_type === "supplier") {
        params.source = "2"; //1企业员工, 商户登录 2:供应商登录
      }
      this.$u.api
        .login(params)
        .then((res) => {
          this.is_loading = false;
          this.$store.commit("commit_token", res.data.token);
          this.$store.commit("commit_hasLogin", true);

          if (res.data.enterprise.length > 1) {
            this.goPage("/pagesB/enterprise/index");
          } else if (res.data.enterprise.length === 1) {
            this.goShop(res.data.enterprise[0]);
          } else {
            this.$u.toast("抱歉当前账号未关联企业");
          }
        })
        .catch(() => {
          this.is_loading = false;
        });
    },
    forgetPwd() {
      this.forgetPwd_istrue = true;
    },
    // 进入企业
    async goShop(row) {
      this.$store.commit("commit_enToken", row.token);
      this.$store.commit("commit_enterprise", row);
      if (this.login_type === "system") {
        await this.getAclList(row.roleType);
        await this.getStaffByToken(row.roleType);
        this.goPage("/pages/index/index", "switchTab");
      } else {
        await this.getSupplierByUserCenterId();
      }
    },
    //获取供应商详情
    async getSupplierByUserCenterId() {
      await this.$u.api.getSupplierByUserCenterId().then((res) => {
        this.$store.commit("commit_supplierToken", res.data.token || "");
        this.$store.commit("commit_userInfo", res.data);
        // this.goPage('/pages/order/index', 'switchTab');
      });
    },
    // 获取登录权限
    async getAclList(roleType) {
      await this.$u.api.getAclList(roleType).then((res) => {
        this.$store.commit("commit_access", res.data);
      });
    },
    async getStaffByToken(roleType) {
      await this.$u.api.getStaffByToken(roleType).then((res) => {
        this.$store.commit("commit_userInfo", {
          ...res.data,
          name: res.data.name || this.mobile || "18888888888",
        });
      });
    },
    // 获取小程序配置信息
    async getMiniProgramInfo() {
      try {
        const res = await this.$u.api.getMiniProgramInfo();
        console.log("小程序配置信息:", res);
        console.log("完整响应数据:", JSON.stringify(res, null, 2));

        // 更新小程序名称
        if (res && res.data && res.data.name) {
          // 解码Unicode字符串 (格式: u6d77u8c5au77e5u9052)
          const decodedName = res.data.name.replace(
            /u([0-9a-fA-F]{4})/g,
            (match, code) => {
              return String.fromCharCode(parseInt(code, 16));
            }
          );
          this.miniProgramName = decodedName;
          console.log("更新小程序名称为:", decodedName);
        }
      } catch (error) {
        console.error("获取小程序配置信息失败:", error);
        console.error("错误详情:", JSON.stringify(error, null, 2));
      }
    },
  },
};
</script>
<style>
page {
  background-color: #ffffff;
  height: 100%;
  width: 100%;
}
</style>
<style scoped lang="scss">
.login-container {
  height: 100vh;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.login-wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.gradient-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #fb5904, #ff9259, #ffc6a8);
  z-index: -2;
}

.login-header {
  margin-top: 300rpx;
  text-align: center;
  z-index: 1;
}

.app-logo {
  margin-bottom: 20rpx;
}

.logo-text {
  font-size: 72rpx;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
}

.platform-name {
  font-size: 36rpx;
  color: #ffffff;
  letter-spacing: 4rpx;
}

.glass-card {
  width: 650rpx;
  margin: 60rpx auto;
  padding: 50rpx 40rpx;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20rpx);
  border-radius: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.card-header {
  text-align: center;
  margin-bottom: 60rpx;
}

.card-title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333333;
}

.form-content {
  margin-bottom: 50rpx;
}

.input-group {
  display: flex;
  align-items: center;
  height: 100rpx;
  border-bottom: 2rpx solid #efefef;
  margin-bottom: 40rpx;
  padding: 0 20rpx;
}

.form-input {
  flex: 1;
  height: 100rpx;
  font-size: 32rpx;
  padding-left: 20rpx;
}

.code-input {
  width: 280rpx;
}

.code-btn {
  width: 200rpx;
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
  background-color: #fb5904;
  color: #ffffff;
  font-size: 26rpx;
  border-radius: 8rpx;
}

.input-placeholder {
  color: #999999;
  font-size: 30rpx;
}

.action-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
}

.action-link {
  color: #fb5904;
  font-size: 28rpx;
}

.login-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background: linear-gradient(90deg, #fb5904, #ff7a37);
  color: #ffffff;
  font-size: 32rpx;
  text-align: center;
  border-radius: 10rpx;
  box-shadow: 0 4rpx 12rpx rgba(251, 89, 4, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-text {
  position: absolute;
  bottom: 40rpx;
  width: 100%;
  text-align: center;
  color: #ffffff;
  font-size: 24rpx;
  letter-spacing: 2rpx;
  z-index: 1;
}
</style>
